<template>
    <van-sticky>
        <van-nav-bar title="拼团详情" left-text="返回" left-arrow @click-left="onBack" />
    </van-sticky>

    <div class="circle">
        <van-circle v-model:current-rate="currentRate" :rate="rate" :speed="50" :text="text" size="180px"
            layer-color="#ccc" />
    </div>

    <div class="time">
        <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
    </div>

    <div class="info">
        <van-card :title="info.products.name">
            <template #thumb>
                <router-link :to="{ path: '/product/product/info', query: { proid: info.products.id } }">
                    <van-image width="100%" height="100%" fit="cover" :src="info.products.thumb_cdn" />
                </router-link>
            </template>
            <template #desc>
                <div class="total">拼团人数：{{ info.total }}人</div>
            </template>

            <template #price>
                <div class="price">拼团价格：￥{{ info.products.team }}</div>
            </template>

            <template #tags>
                <div class="info-time">
                    拼团时间：{{ info.createtime_text }}（开始）- {{ info.endtime_text }}（结束）
                </div>
            </template>
        </van-card>
    </div>

    <div class="list">
        <div class="item" v-for="item in list" :key="item.id">
            <div class="left">
                <img :src="item.businesss.avatar_cdn" alt="">
            </div>
            <div class="right">
                <div class="nickname" v-if="info.busid == item.busid">{{ item.businesss.nickname }}（发起人）</div>
                <div class="nickname">{{ item.businesss.nickname }}</div>
                <div class="join-time">拼单时间：{{ item.createtime_text }}</div>
            </div>
        </div>
    </div>

    <van-action-bar>
        <van-action-bar-button type="danger" text="参与拼团" @click="onJoin(info.id,info.products.id)" />
        <van-action-bar-button type="danger" text="发起拼团" @click="onCreate" />
    </van-action-bar>
</template>



<script setup>
const { proxy } = getCurrentInstance();
const teamid = ref(proxy.$route.query.teamid);

//进度条
const currentRate = ref(0);      //初始进度位置
const text = computed(() => "拼团进度：" + currentRate.value.toFixed(0) + '%');
const rate = ref(0);           //进度终点

//倒计时
const time = ref(0);

//拼团人数
const joinTotal = ref(0);// 已拼团的人数
const total = ref(0);// 拼团总人数
const info = ref({   // 拼团数据
    products: {}
});
const list = ref([]);// 拼团人员数据

onBeforeMount(() => {
    getTeamInfo();
})

const getTeamInfo = async () => {
    let params = {
        teamid: teamid.value
    }

    let result = await proxy.$post({
        url: '/product/team/info',
        params
    })

    if (result.code === 1) {
        info.value = result.data.team;
        list.value = result.data.list;

        total.value = info.value.total;
        joinTotal.value = list.value.length;

        let num = (100 / total.value).toFixed(2);
        num = num * joinTotal.value;
        rate.value = num;

        time.value = parseInt((info.value.endtime * 1000) - Date.now()); //倒计时时间设置
    } else {
        proxy.$NotifyWarn(result.msg);
    }
}

//参与拼团 => 商品详情 => 选择商品规格
const onJoin = async (teamid,proid) => {
    proxy.$cookies.set('teamid',teamid);
    
    proxy.$router.push({path:'/product/product/info',query:{proid}});
}

const onBack = () => {
    proxy.$router.back();
}
</script>

<style scoped>
.circle {
    display: flex;
    justify-content: center;
    margin-top: 10vw;
    font-size: 130px;
}

.time {
    display: flex;
    justify-content: center;
    margin-top: 5vw;
}

.info {
    margin-top: 5vw;
}
.list{
    margin-top: 5vw;
    padding-bottom: 40px;
}
.list .item{
    background: #f0f0f0;
    display: flex;
    margin: 5vw 0;  
}

.list .item .left{
    width: 80px;
    height: 60px;
}

.list .item .left img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list .item .right{
    margin-left: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
}
</style>